<meta charset="UTF-8">
<div id="oiling-marking" class="full">
    <div class="demo-spin-container" v-if="loading">
        <Spin size="large" fix></Spin>
    </div>
    <Row style="padding:10px;height: 55px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 240px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSelectedDev" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder" @on-click="focus"></i-input>
                <transition name="fade">
                    <ul class="search-item-wrapper" v-show="isShowMatchDev">
                        <li class="demo-auto-complete-item" v-for="item in filterData">
                            <div class="demo-auto-complete-group" v-show="item.devices.length" @click="sosoSelectGroup(item.groupname)">
                                <span>{{ item.groupname }}</span>
                            </div>
                            <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.allDeviceIdTitle }}</span>
                            </div>
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
        <div style="padding-left: 10px;" class="fl">
            <span>{{$t("reportForm.selectTime")}}:</span>
            <date-picker type="month" v-model="month" :clearable="false" style="width:120px" placement="bottom-start" :options="dateOptions"></date-picker>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
        </div>
    </Row>
    <div>
        <i-table ref="table" :columns="dayColumns" size="small" height="100" border :data="dayTableData"></i-table>
    </div>
    <div>
        <div id="old-chart" style="width: 100%;height: 330px;"></div>
    </div>
    <div style="padding:10px">
        <Row>
            <i-col span="24">
                <div class="fl">
                    {{$t('device.oilCount')}}:
                </div>
                <div class="fl" style="padding-right: 10px;">
                    <i-select v-model.sync="oilType" style="width: 70px;">
                        <i-option value="1">{{$t('reportForm.oil1')}}</i-option>
                        <i-option value="2">{{$t('reportForm.oil2')}}</i-option>
                        <i-option value="3">{{$t('reportForm.oil3')}}</i-option>
                        <i-option value="4">{{$t('reportForm.oil4')}}</i-option>
                    </i-select>
                </div>
                <div class="fl">
                    {{$t("device.threshold")}}:
                </div>
                <div class="fl" style="padding-right: 10px;">
                    <input-number v-if="oilType == '1'" :max="65535" :min="0" v-model.trim.number="threshold1" style="width:70px"></input-number>
                    <input-number v-if="oilType == '2'" :max="65535" :min="0" v-model.trim.number="threshold2" style="width:70px"></input-number>
                    <input-number v-if="oilType == '3'" :max="65535" :min="0" v-model.trim.number="threshold3" style="width:70px"></input-number>
                    <input-number v-if="oilType == '4'" :max="65535" :min="0" v-model.trim.number="threshold4" style="width:70px"></input-number>
                </div>


                <div class="fl">
                    {{$t("bgMgr.blindVolume")}}:
                </div>
                <div class="fl" style="padding-right: 10px;">
                    <input-number v-if="oilType == '1'" :max="1000" :min="0" v-model.trim.number="blindvolume1" style="width:70px"></input-number>
                    <input-number v-if="oilType == '2'" :max="1000" :min="0" v-model.trim.number="blindvolume2" style="width:70px"></input-number>
                    <input-number v-if="oilType == '3'" :max="1000" :min="0" v-model.trim.number="blindvolume3" style="width:70px"></input-number>
                    <input-number v-if="oilType == '4'" :max="1000" :min="0" v-model.trim.number="blindvolume4" style="width:70px"></input-number>
                </div>

                <div class="fl">
                    {{$t("reportForm.startAd")}}:
                </div>
                <div class="fl" style="padding-right: 10px;">
                    <i-input v-model.trim.number="startad" style="width:80px" icon="ios-close-circle-outline" @on-click="startad=''"></i-input>
                </div>


                <div class="fl">
                    {{$t("reportForm.enAd")}}:
                </div>
                <div class="fl" style="padding-right: 10px;">
                    <i-input v-model.trim.number="endad" style="width:80px" icon="ios-close-circle-outline" @on-click="endad=''"></i-input>
                </div>

                <div class="fl" style="padding-right: 10px;">
                    {{$t("reportForm.fuelV")}}:
                </div>
                <div class="fl">
                    <i-input v-model.trim.number="ticketvolume" style="width:80px" icon="ios-close-circle-outline" @on-click="ticketvolume=''"></i-input>
                </div>
                <div class="fl" style="margin-left:5px;">
                    <i-button type="primary" @click="addRefuelTicket">{{$t('rule.add')}}</i-button>
                </div>
                <div class="fl" style="margin-left:5px;">
                    <i-button type="primary" @click="preViewOilDetectors">{{$t('device.preview')}}</i-button>
                </div>
                <div class="fl" style="margin-left:5px;">
                    <Poptip confirm :title="$t('device.saveOilDetectorsTips')" @on-ok="saveRefuelTickettoMarkers">
                        <i-button type="primary">{{$t('user.save')}}</i-button>
                    </Poptip>
                </div>
            </i-col>
        </Row>
        <Row style="margin:10px 0px 0px 0px;">
            <i-Col span="16" style="padding-right: 5px;">
                <div class="full" style="padding-left: 5px;height: 30px;border: 1px solid #DCDEE2;border-bottom:none;line-height: 30px;">
                    {{$t('bgMgr.refuelTickets')}}
                    <div style="float: right;">
                        <Checkbox v-model="combineStatus">{{$t("device.mergeStatistical")}}</Checkbox>
                        <Checkbox v-model="combineStatusNotRun">{{$t("device.notRunOilMergeStatistical")}}</Checkbox>
                    </div>
                </div>
            </i-Col>
            <i-Col span="8" style="padding-left: 5px;">
                <div class="full" style="padding-left: 5px;height: 30px;border: 1px solid #DCDEE2;border-bottom:none;line-height: 30px;">
                    {{$t('bgMgr.markers')}}
                </div>
            </i-Col>
        </Row>
        <Row>
            <i-Col span="16">
                <div style="padding: 0px 5px 0px 0px;">
                    <i-table border :columns="taggingColumns" highlight-row size="small" :data="refuelTickets" :height="tableHeight"></i-table>
                </div>
            </i-Col>
            <i-Col span="8">
                <div style="padding: 0px 0px 0px 5px;">
                    <i-table border v-if="oilType == '1'" :row-class-name="rowClassName" :columns="newTaggingColumns" size="small" :data="newOilMarker1" :height="tableHeight"></i-table>
                    <i-table border v-if="oilType == '2'" :row-class-name="rowClassName" :columns="newTaggingColumns" size="small" :data="newOilMarker2" :height="tableHeight"></i-table>
                    <i-table border v-if="oilType == '3'" :row-class-name="rowClassName" :columns="newTaggingColumns" size="small" :data="newOilMarker3" :height="tableHeight"></i-table>
                    <i-table border v-if="oilType == '4'" :row-class-name="rowClassName" :columns="newTaggingColumns" size="small" :data="newOilMarker4" :height="tableHeight"></i-table>
                </div>
            </i-Col>
        </Row>
    </div>
    <script>
        vueInstanse = new Vue({
            el: '#oiling-marking',
            data: {
                dateOptions: {
                    disabledDate: function(date) {
                        return (date && date.valueOf()) > Date.now();
                    }
                },
                groupslist: [],
                date: new Date(),
                tableHeight: 0,
                oilType: '1',
                combineStatus: false,
                combineStatusNotRun: false,
                threshold1: null,
                threshold2: null,
                threshold3: null,
                threshold4: null,

                startad: '',
                endad: '',

                blindvolume1: null,
                blindvolume2: null,
                blindvolume3: null,
                blindvolume4: null,
                ticketvolume: 0,
                taggingColumns: [{
                    title: vRoot.$t('reportForm.choose'),
                    width: 75,
                    render: function(h, params) {
                        var row = params.row;
                        return h('Checkbox', {
                            props: {
                                value: row.used == 1
                            },
                            on: {
                                'on-change': function(result) {
                                    row.used = result ? 1 : 0;
                                    vueInstanse.onSelectionChange(row);
                                }
                            }
                        }, []);
                    }
                }, {
                    type: 'index',
                    width: 65
                }, {
                    key: 'date',
                    title: isZh ? '日期' : 'Date',
                    sortable: true,
                    render: function(h, params) {
                        return h('div', {}, DateFormat.format(new Date(params.row.starttime), 'yyyy-MM-dd'));
                    }
                }, {
                    key: 'startad',
                    width: 115,
                    title: isZh ? '开始模拟量' : 'Start Ad',
                    sortable: true,
                }, {
                    key: 'endad',
                    width: 115,
                    title: isZh ? '结束模拟量' : 'End Ad',
                    sortable: true,
                }, {
                    key: 'ticketvolume',
                    sortable: true,
                    title: vRoot.$t('reportForm.oil') + '(L)',
                }, {
                    key: 'gradient',
                    sortable: true,
                    title: isZh ? '变化率' : 'Gradient',
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        var row = params.row;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small',
                            },
                            on: {
                                click: function() {
                                    vueInstanse.delRefuelTicket(row);
                                }
                            }
                        }, isZh ? '删除' : 'Delete')
                    },
                }],
                refuelTickets: [],
                newTaggingColumns: [{
                    type: 'index',
                    width: 65
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'),
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil') + '(L)',
                }],
                newOilMarker1: [],
                newOilMarker2: [],
                newOilMarker3: [],
                newOilMarker4: [],
                loading: false,
                month: null,
                dayColumns: [],
                dayTableData: [],
            },
            i18n: utils.getI18n(),
            mixins: [reportMixin],
            methods: {

                getTheMonthDays: function(date) {
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    year = month == 12 ? year + 1 : year;
                    month = month == 12 ? 1 : month;
                    return new Date(new Date(year, month, 1) - 1).getDate();
                },
                getInfoContent: function(h, info) {
                    var children = [];
                    if (info) {
                        var totalacc = (info.totalacc / 1000 / 3600).toFixed(2);
                        var idleoil = info.idleoil / 100;
                        var runoilper100km = info.runoilper100km;
                        var totaldistance = (info.totaldistance / 1000).toFixed(2)
                        var totalaccStr = utils.timeStamp(info.totalacc);
                        var totaloil = info.totaloil / 100;
                        var addoil = info.addoil / 100;
                        var leakoil = info.leakoil / 100;

                        children.push(h('div', vRoot.$t("reportForm.fuelVolume") + ':' + addoil + 'L'));
                        children.push(h('div', vRoot.$t("reportForm.oilLeakage") + ':' + leakoil + 'L'));
                        children.push(h('div', vRoot.$t("reportForm.idleoil") + ':' + idleoil + 'L'));
                        children.push(h('div', vRoot.$t("reportForm.workingHours") + ':' + totalaccStr));
                        children.push(h('div', vRoot.$t("reportForm.runoilper100km") + ':' + runoilper100km + 'L'));
                        children.push(h('div', vRoot.$t("reportForm.fuelConsumption100km") + ':' + info.oilper100km + 'L'));
                        children.push(h('div', vRoot.$t("reportForm.averageSpeed") + ':' + info.avgspeed.toFixed(2) + 'Km/h'));


                    } else {
                        children.push(h('div', {}, isZh ? '空' : "Empty"));
                    }

                    return children;
                },
                rowClassName: function(row, index) {
                    if (row.maunedit === 1) {
                        return 'demo-table-info-row';
                    }
                    return '';
                },
                delRefuelTicket: function(row) {
                    var me = this;
                    var url = myUrls.delRefuelTicket();
                    var data = {
                        deviceid: row.deviceid,
                        oilindex: Number(this.oilType),
                        threshold: this.getThreshold(),
                        combinestatus: me.getCombinestatus(),
                        refuelticketuuid: row.refuelticketuuid,
                        blindvolume: this.getCurruntBlindVolume()
                    }
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.setRefuelTicketData(resp);
                            me.$Message.success(isZh ? '删除成功' : 'Delete succeeded');
                        } else {
                            me.$Message.error(isZh ? '删除失败' : 'Deletion failed');
                        };
                    });
                },
                addRefuelTicket: function() {
                    if (this.queryDeviceId == "") {
                        this.$Message.error(this.$t("reportForm.selectDevTip"));
                        return;
                    };
                    if (!this.startad) {
                        this.$Message.error(isZh ? '请填写开始模拟量' : 'Please fill in the start analog quantity');
                        return;
                    }
                    if (!this.endad) {
                        this.$Message.error(isZh ? '请填写结束模拟量' : 'Please fill in the end analog quantity');
                        return;
                    }
                    var starttime = this.starttime;
                    var endtime = this.endtime;
                    if (!starttime) {
                        starttime = new Date(this.statisticsday + ' 00:00:00').getTime();
                    }
                    if (!endtime) {
                        endtime = new Date(this.statisticsday + ' 23:59:59').getTime();
                    }
                    var url = myUrls.addRefuelTicket(),
                        me = this;
                    var data = {
                        deviceid: this.queryDeviceId,
                        threshold: this.getThreshold(),
                        combinestatus: me.getCombinestatus(),
                        oilindex: Number(this.oilType), // int oilindex;//第几个油箱从0开始' ,
                        startad: this.startad, // int startad;//开始模拟量' ,
                        endad: this.endad, // int endad;//结束模拟量' ,
                        ticketvolume: this.ticketvolume,
                        starttime: starttime,
                        endtime: endtime,
                        blindvolume: this.getCurruntBlindVolume()
                    };
                    this.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.setRefuelTicketData(resp);
                            me.$Message.success(vRoot.$t('message.saveSucc'));
                        } else if (resp.status == 1) {
                            me.$Message.error(isZh ? '加油记录已达上限' : 'Refueling record has reached the upper limit');
                        } else {
                            me.$Message.error(resp.cause);
                        }
                        me.loading = false;
                    });
                },
                getCombinestatus: function() {
                    var combinestatus = 0;

                    if (this.combineStatus) {
                        combinestatus = combinestatus | 0x01;
                    }
                    if (this.combineStatusNotRun) {
                        combinestatus = combinestatus | 0x02;
                    }

                    return combinestatus;
                },
                getThreshold: function() {
                    var threshold = null;
                    if (this.oilType == '1') {
                        threshold = this.threshold1;
                    } else if (this.oilType == '2') {
                        threshold = this.threshold2;
                    } else if (this.oilType == '3') {
                        threshold = this.threshold3;
                    } else if (this.oilType == '4') {
                        threshold = this.threshold4;
                    };
                    return Number(threshold);
                },
                saveRefuelTickettoMarkers: function() {

                    if (this.queryDeviceId == "") {
                        this.$Message.error(this.$t("reportForm.selectDevTip"));
                        return
                    };
                    var me = this;
                    var url = myUrls.saveRefuelTickettoMarkers();
                    var data = {
                        deviceid: this.queryDeviceId,
                        oilindex: Number(this.oilType),
                        threshold: this.getThreshold(),
                        combinestatus: me.getCombinestatus(),
                        blindvolume: this.getCurruntBlindVolume()
                    }
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success(vRoot.$t('message.saveSucc'));
                            me.setRefuelTicketData(resp);
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                preViewOilDetectors: function() {
                    if (this.queryDeviceId == "") {
                        this.$Message.error(this.$t("reportForm.selectDevTip"));
                        return
                    };

                    if (!(this.deviceid && this.statisticsday)) {
                        this.$Message.error(this.$t("message.plSelectTime"));
                        return;
                    }
                    var self = this;
                    var url = myUrls.preViewOilDetectors();
                    var startday = DateFormat.longToDateStr(this.date.getTime(), timeDifference);
                    var newOildetectors = deepClone(this.oildetectors);
                    if (newOildetectors) {
                        var tempOilDetector = newOildetectors[0];
                        if (tempOilDetector) {
                            tempOilDetector.threshold = this.threshold1;
                            tempOilDetector.blindvolume = this.blindvolume1;
                            tempOilDetector.markers = this.newOilMarker1;
                            tempOilDetector.appearance = this.newOilMarker1.length > 0 ? 4 : tempOilDetector.appearance;
                        }

                        var tempOilDetector = newOildetectors[1];
                        if (tempOilDetector) {
                            tempOilDetector.threshold = this.threshold2;
                            tempOilDetector.blindvolume = this.blindvolume2;
                            tempOilDetector.markers = this.newOilMarker2;
                            tempOilDetector.appearance = this.newOilMarker2.length > 0 ? 4 : tempOilDetector.appearance;
                        }

                        var tempOilDetector = newOildetectors[2];
                        if (tempOilDetector) {
                            tempOilDetector.threshold = this.threshold3;
                            tempOilDetector.blindvolume = this.blindvolume3;
                            tempOilDetector.markers = this.newOilMarker3;
                            tempOilDetector.appearance = this.newOilMarker3.length > 0 ? 4 : tempOilDetector.appearance;
                        }

                        var tempOilDetector = newOildetectors[3];
                        if (tempOilDetector) {
                            tempOilDetector.threshold = this.threshold4;
                            tempOilDetector.blindvolume = this.blindvolume4;
                            tempOilDetector.markers = this.newOilMarker4;
                            tempOilDetector.appearance = this.newOilMarker4.length > 0 ? 4 : tempOilDetector.appearance;
                        }
                    }

                    var data = {
                        deviceid: this.deviceid,
                        combinestatus: this.getCombinestatus(),
                        startday: this.statisticsday,
                        endday: this.statisticsday,
                        offset: timeDifference,
                        oildetectors: newOildetectors,
                    };
                    this.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status === 0) {

                            var oilRecords = resp.records[0].addorleakrecords;
                            var tracks = resp.records[0].records;
                            if (tracks) {
                                tracks.sort((a, b) => {
                                    return a.updatetime - b.updatetime;
                                });
                            }
                            oilRecords.forEach(function(record) {
                                var oilstate = record.oilstate;
                                if (oilstate == -1 || oilstate == 1) {
                                    record.eoil = record.eoil / 100;
                                    record.soil = record.soil / 100;
                                }
                            });

                            self.setChartsOption('next', tracks, oilRecords);
                        } else {
                            self.$Message.error(resp.cause);
                        }
                        self.loading = false;
                    });
                },

                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 760;
                    }
                    this.tableHeight = (wHeight - 642);
                },
                queryAddOilStatus: function(callback) {

                    var me = this;
                    var data = {
                        startday: this.statisticsday,
                        endday: this.statisticsday,
                        offset: timeDifference,
                        devices: [this.deviceid],
                        oilstate: 99,
                        oilindex: 0
                    };
                    utils.sendAjax(myUrls.reportOilRecord(), data, function(resp) {
                        if (resp.status == 0) {
                            if (resp.records) {

                                resp.records.forEach(function(item) {
                                    item.records.forEach(function(record) {
                                        var oilstate = record.oilstate;
                                        if (oilstate == -1 || oilstate == 1) {
                                            record.eoil = record.eoil / 100;
                                            record.soil = record.soil / 100;
                                        }
                                    });
                                });
                                callback && callback(resp.records);
                            } else {
                                me.$Message.error(self.$t("reportForm.noRecord"));
                            }
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    })
                },

                queryRefuelTicket: function() {
                    var me = this;
                    var url = myUrls.queryRefuelTicket();
                    var data = {
                        deviceid: this.queryDeviceId,
                        oilindex: Number(this.oilType)
                    }
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.setRefuelTicketData(resp);
                        }
                    });
                },
                setRefuelTicketData: function(resp) {
                    var me = this;
                    var records = resp.records;
                    var oildetectors = resp.oildetectors.oildetectors;

                    me.combineStatus = (resp.oildetectors.combinestatus & 0x01) == 0x01;
                    me.combineStatusNotRun = (resp.oildetectors.combinestatus & 0x02) == 0x02;
                    me.taggingDataRecords = records;
                    if (oildetectors != null) {

                        me.oildetectors = oildetectors;
                        oildetectors.forEach(function(item, index) {

                            if (index == 0) {
                                me.threshold1 = item.threshold;
                                me.blindvolume1 = item.blindvolume;
                                me.newOilMarker1 = item.markers ? item.markers : [];

                            } else if (index == 1) {
                                me.threshold2 = item.threshold;
                                me.blindvolume2 = item.blindvolume;
                                me.newOilMarker2 = item.markers ? item.markers : [];

                            } else if (index == 2) {
                                me.threshold3 = item.threshold;
                                me.blindvolume3 = item.blindvolume;
                                me.newOilMarker3 = item.markers ? item.markers : [];

                            } else if (index == 3) {
                                me.threshold4 = item.threshold;
                                me.blindvolume4 = item.blindvolume;
                                me.newOilMarker4 = item.markers ? item.markers : [];
                            }
                        });
                        records.forEach(function(record, index) {
                            if (index == 0) {
                                if (me.oilType == '1') {
                                    me.refuelTickets = records[0];
                                }
                            } else if (index == 1) {
                                if (me.oilType == '2') {

                                    me.refuelTickets = records[1];
                                }
                            } else if (index == 2) {

                                if (me.oilType == '3') {
                                    me.refuelTickets = records[2];
                                }
                            } else if (index == 3) {
                                if (me.oilType == '4') {
                                    me.refuelTickets = records[3];
                                }
                            }
                        })
                    }
                },
                onClickQuery: function() {

                    if (this.queryDeviceId == "") {
                        this.$Message.error(this.$t("reportForm.selectDevTip"));
                        return
                    };
                    this.recvtime = [];
                    this.totalad = [];
                    this.notRunTotalad = [];
                    this.speed = [];
                    this.oil1 = [];
                    this.oil2 = [];
                    this.oil3 = [];
                    this.oil4 = [];
                    this.srcad0 = [];
                    this.srcad1 = [];
                    this.srcad2 = [];
                    this.srcad3 = [];

                    this.markPointData = [];
                    this.markPointDataOil1 = [];
                    this.markPointDataOil2 = [];
                    this.markPointDataOil3 = [];
                    this.markPointDataOil4 = [];
                    this.markPointDataOil99 = [];


                    this.totalad1 = [];
                    this.notRunTotalad1 = [];
                    this.speed1 = [];
                    this.oil11 = [];
                    this.oil21 = [];
                    this.oil31 = [];
                    this.oil41 = [];
                    this.srcad01 = [];
                    this.srcad11 = [];
                    this.srcad21 = [];
                    this.srcad31 = [];

                    this.markPointData1 = [];
                    this.markPointDataOil11 = [];
                    this.markPointDataOil12 = [];
                    this.markPointDataOil13 = [];
                    this.markPointDataOil14 = [];
                    this.markPointDataOil199 = [];


                    this.oldChartsIns.setOption(this.getChartsOption());

                    var me = this;
                    var url = myUrls.reportOilMonth();
                    var yearmonth = DateFormat.format(this.month, 'yyyy-MM');
                    var yearmonthArr = yearmonth.split("-");
                    var data = {
                        year: Number(yearmonthArr[0]),
                        month: Number(yearmonthArr[1]),
                        offset: timeDifference,
                        deviceids: [this.queryDeviceId]
                    }
                    me.loading = true;
                    me.deviceid = null;
                    me.starttime = null;
                    me.endtime = null;
                    me.statisticsday = null;
                    me.queryRefuelTicket();
                    utils.sendAjax(url, data, function(resp) {

                        me.loading = false;
                        var month = DateFormat.format(me.month, 'yyyy_MM');
                        if (resp.status === 0) {
                            var dayLen = me.getTheMonthDays(me.month);
                            if (resp.devices.length) {
                                resp.devices.forEach(function(item, idx) {
                                    item.index = idx + 1;
                                    var deviceid = item.deviceid;
                                    var records = item.records;
                                    var totaldistance = 0;
                                    var totaloil = 0;
                                    var addoil = 0;
                                    var leakoil = 0;
                                    var idleoil = 0;
                                    var avgrunoilper100km = 0;
                                    var avgoilper100km = 0;
                                    var avgRunCount = 0;
                                    var avgPerCount = 0;
                                    for (var j = 0; j < dayLen; j++) {
                                        var day = records[j];
                                        if (day) {
                                            var key = day.statisticsday.split('-')[2];
                                            var distance = day.maxtotaldistance - day.mintotaldistance;
                                            totaldistance += distance;
                                            item['day' + String(parseInt(key))] = utils.getMileage(distance);
                                            item['day' + String(parseInt(key)) + 'oil'] = day.totaloil;
                                            totaloil += day.totaloil;
                                            addoil += day.addoil;
                                            leakoil += day.leakoil;
                                            idleoil += day.idleoil;
                                            item['disAndOil' + Number(key)] = item['day' + String(parseInt(key))] + '/' + (item['day' + String(parseInt(key)) + 'oil'] / 100) + 'L';
                                            day.yearmonth = yearmonthArr[0] + "-" + yearmonthArr[1];
                                            if (day.runoilper100km > 0) {
                                                avgRunCount++;
                                                avgrunoilper100km += day.runoilper100km;
                                            }
                                            if (day.oilper100km > 0) {
                                                avgPerCount++;
                                                avgoilper100km += day.oilper100km;
                                            }
                                        }
                                    }
                                    for (var k = 0; k < dayLen; k++) {
                                        var key = 'day' + (k + 1);
                                        if (!item[key]) {
                                            item[key] = '-';
                                        }
                                    }

                                    if (avgRunCount > 0) {
                                        item.avgrunoilper100km = (avgrunoilper100km / avgRunCount).toFixed(2);
                                    } else {
                                        item.avgrunoilper100km = 0;
                                    }
                                    if (avgPerCount > 0) {
                                        item.avgoilper100km = (avgoilper100km / avgPerCount).toFixed(2);
                                    } else {
                                        item.avgoilper100km = 0;
                                    }



                                    item.totaloil = (totaloil / 100);
                                    item.addoil = (addoil / 100);
                                    item.leakoil = (leakoil / 100);
                                    item.idleoil = (idleoil / 100);
                                    item.month = month;
                                    item.devicename = "\t" + (vstore.state.deviceInfos[deviceid] ? vstore.state.deviceInfos[deviceid].devicename : deviceid);
                                    item.deviceid = "\t" + deviceid;
                                    item.totaldistance = utils.getMileage(totaldistance);
                                });

                                me.dayTableData = resp.devices;
                            } else {
                                me.dayTableData = [];
                            };
                            me.currentIndex = 1;
                        } else {
                            me.tableData = [];
                        }
                    })

                    // recvtime markPointData totalad oil 1 - 4 srcad 0 - 3 devStates devReissue

                },
                getDayColor: function(info) {
                    var color = 'grey';
                    if (info) {
                        if (info.leakoil > 0) {
                            color = 'red';
                        } else {
                            if (info.addoil > 0) {
                                color = '#2DB7F5';
                            }
                        }
                    }
                    return color;
                },
                onSelectionChange: function(currentRow) {
                    var url = myUrls.setRefuelticketUsed();
                    var me = this;
                    var data = {
                        deviceid: currentRow.deviceid,
                        oilindex: Number(this.oilType),
                        threshold: this.getThreshold(),
                        combinestatus: this.getCombinestatus(),
                        refuelticketuuid: currentRow.refuelticketuuid,
                        used: currentRow.used,
                        blindvolume: this.getCurruntBlindVolume()
                    }
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.setRefuelTicketData(resp);
                            // me.$Message.success(isZh ? '删除成功' : 'Delete succeeded');
                        } else {
                            // me.$Message.error(isZh ? '删除失败' : 'Deletion failed');
                        };
                    });
                },
                getCurruntBlindVolume: function() {
                    var blindvolume = 0;
                    if (this.oilType == '1') {
                        blindvolume = this.blindvolume1;
                    } else if (this.oilType == '2') {
                        blindvolume = this.blindvolume2;
                    } else if (this.oilType == '3') {
                        blindvolume = this.blindvolume3;
                    } else if (this.oilType == '4') {
                        blindvolume = this.blindvolume4;
                    }
                    return blindvolume;
                },
                queryChartsDataAndOil: function(startday, deviceid) {

                    this.recvtime = [];
                    this.totalad = [];
                    this.notRunTotalad = [];
                    this.speed = [];
                    this.oil1 = [];
                    this.oil2 = [];
                    this.oil3 = [];
                    this.oil4 = [];
                    this.srcad0 = [];
                    this.srcad1 = [];
                    this.srcad2 = [];
                    this.srcad3 = [];

                    this.markPointData = [];
                    this.markPointDataOil1 = [];
                    this.markPointDataOil2 = [];
                    this.markPointDataOil3 = [];
                    this.markPointDataOil4 = [];
                    this.markPointDataOil99 = [];


                    this.totalad1 = [];
                    this.notRunTotalad1 = [];
                    this.speed1 = [];
                    this.oil11 = [];
                    this.oil21 = [];
                    this.oil31 = [];
                    this.oil41 = [];
                    this.srcad01 = [];
                    this.srcad11 = [];
                    this.srcad21 = [];
                    this.srcad31 = [];

                    this.markPointData1 = [];
                    this.markPointDataOil11 = [];
                    this.markPointDataOil12 = [];
                    this.markPointDataOil13 = [];
                    this.markPointDataOil14 = [];
                    this.markPointDataOil199 = [];

                    this.loading = true;
                    var self = this;
                    // var startday = DateFormat.longToDateStr(this.date.getTime(), timeDifference);

                    var data = {
                        startday: startday,
                        endday: startday,
                        offset: timeDifference,
                        devices: [deviceid],
                    };


                    this.queryAddOilStatus(function(oilRecords) {
                        if (oilRecords.length > 0) {
                            if (oilRecords[0].records.length > 0) {
                                var record = oilRecords[0].records[0];
                                var platformFuel = Math.abs(record.eoil - record.soil).toFixed(2);
                                self.platformFuel = platformFuel == 0 ? 1 : platformFuel;
                                self.realFuel = self.platformFuel;
                            }
                        }

                        utils.sendAjax(myUrls.reportOilTime(), data, function(resp) {
                            if (resp.status === 0) {
                                var tracks = resp.records[0].records;
                                if (tracks) {
                                    tracks.sort(function(a, b) {
                                        return a.updatetime - b.updatetime;
                                    });
                                }
                                self.setChartsOption('prve', tracks, oilRecords[0].records);
                            } else {
                                self.$Message.error(resp.cause);
                            }
                            self.loading = false;
                        });
                    });
                },
                setChartsOption: function(type, trackList, oilRecords) {

                    var self = this,
                        records = [],
                        totalads = [],
                        notRunTotalad = [],
                        recvtime = [],
                        oil1 = [],
                        oil2 = [],
                        oil3 = [],
                        oil4 = [],
                        srcad0 = [],
                        srcad1 = [],
                        srcad2 = [],
                        srcad3 = [],
                        devReissue = [],
                        markPointData = [],
                        altitudes = [],
                        voltages = [],
                        speeds = [];
                    devStates = [];

                    trackList.forEach(function(record, index) {
                        record.index = index;
                        var totalad = record.totalad;
                        var totalnotrunningad = record.totalnotrunningad;
                        var speed = (record.speed / 1000).toFixed(2);
                        var ad0 = record.ad0;
                        var ad1 = record.ad1;
                        var ad2 = record.ad2;
                        var ad3 = record.ad3;
                        if (ad0 < 0) {
                            ad0 = 0;
                        };
                        if (ad1 < 0) {
                            ad1 = 0;
                        };
                        if (ad2 < 0) {
                            ad2 = 0;
                        };
                        if (ad3 < 0) {
                            ad3 = 0;
                        };
                        record.totalad = totalad / 100;
                        record.totalnotrunningad = totalnotrunningad / 100;
                        record.ad0 = ad0 / 100;
                        record.ad1 = ad1 / 100;
                        record.ad2 = ad2 / 100;
                        record.ad3 = ad3 / 100;
                        record.updatetimeStr = DateFormat.longToLocalDateTimeStr(record.updatetime);

                        totalads.push(record.totalad);
                        notRunTotalad.push(record.totalnotrunningad);
                        recvtime.push(record.updatetimeStr);
                        speeds.push(Number(speed));
                        oil1.push(record.ad0);
                        oil2.push(record.ad1);
                        oil3.push(record.ad2);
                        oil4.push(record.ad3);
                        srcad0.push(record.srcad0);
                        srcad1.push(record.srcad1);
                        srcad2.push(record.srcad2);
                        srcad3.push(record.srcad3);

                    });


                    var markPoints = utils.calMarkPoint(trackList, oilRecords, 0);
                    var markPoints1 = utils.calMarkPoint(trackList, oilRecords, 1);
                    var markPoints2 = utils.calMarkPoint(trackList, oilRecords, 2);
                    var markPoints3 = utils.calMarkPoint(trackList, oilRecords, 3);
                    var markPoints4 = utils.calMarkPoint(trackList, oilRecords, 4);
                    var markPoints99 = utils.calMarkPoint(trackList, oilRecords, 99);


                    if (type == 'prve') {
                        this.recvtime = recvtime;
                        this.totalad = totalads;
                        this.notRunTotalad = notRunTotalad;
                        this.speed = speeds;
                        this.oil1 = oil1;
                        this.oil2 = oil2;
                        this.oil3 = oil3;
                        this.oil4 = oil4;
                        this.srcad0 = srcad0;
                        this.srcad1 = srcad1;
                        this.srcad2 = srcad2;
                        this.srcad3 = srcad3;

                        self.markPointData = markPoints;
                        self.markPointDataOil1 = markPoints1;
                        self.markPointDataOil2 = markPoints2;
                        self.markPointDataOil3 = markPoints3;
                        self.markPointDataOil4 = markPoints4;
                        self.markPointDataOil99 = markPoints99;

                    } else {
                        this.totalad1 = totalads;
                        this.notRunTotalad1 = notRunTotalad;
                        this.speed1 = speeds;
                        this.oil11 = oil1;
                        this.oil21 = oil2;
                        this.oil31 = oil3;
                        this.oil41 = oil4;
                        this.srcad01 = srcad0;
                        this.srcad11 = srcad1;
                        this.srcad21 = srcad2;
                        this.srcad31 = srcad3;

                        this.markPointData1 = markPoints;
                        self.markPointDataOil11 = markPoints1;
                        self.markPointDataOil12 = markPoints2;
                        self.markPointDataOil13 = markPoints3;
                        self.markPointDataOil14 = markPoints4;
                        self.markPointDataOil199 = markPoints99;
                    }

                    this.oldChartsIns.setOption(self.getChartsOption());
                },
                getChartsOption: function(dataInfo) {
                    var firstStr = isZh ? '前' : 'Prve ';
                    var lastStr = isZh ? '后' : 'Next ';
                    var time = vRoot.$t('reportForm.time');
                    var totoil = firstStr + vRoot.$t('reportForm.totalOil');
                    var notRunTotalad = firstStr + vRoot.$t('reportForm.notRunTotalad');
                    var speed = firstStr + vRoot.$t('reportForm.speed');
                    var usoil1 = firstStr + vRoot.$t('reportForm.oil1');
                    var usoil2 = firstStr + vRoot.$t('reportForm.oil2');
                    var usoil3 = firstStr + vRoot.$t('reportForm.oil3');
                    var usoil4 = firstStr + vRoot.$t('reportForm.oil4');

                    var srcad0 = firstStr + vRoot.$t('reportForm.srcad0');
                    var srcad1 = firstStr + vRoot.$t('reportForm.srcad1');
                    var srcad2 = firstStr + vRoot.$t('reportForm.srcad2');
                    var srcad3 = firstStr + vRoot.$t('reportForm.srcad3');

                    var totoil1 = lastStr + vRoot.$t('reportForm.totalOil');
                    var notRunTotalad1 = lastStr + vRoot.$t('reportForm.notRunTotalad');
                    var speed1 = lastStr + vRoot.$t('reportForm.speed');

                    var usoil11 = lastStr + vRoot.$t('reportForm.oil1');
                    var usoil21 = lastStr + vRoot.$t('reportForm.oil2');
                    var usoil31 = lastStr + vRoot.$t('reportForm.oil3');
                    var usoil41 = lastStr + vRoot.$t('reportForm.oil4');

                    var srcad01 = lastStr + vRoot.$t('reportForm.srcad0');
                    var srcad11 = lastStr + vRoot.$t('reportForm.srcad1');
                    var srcad21 = lastStr + vRoot.$t('reportForm.srcad2');
                    var srcad31 = lastStr + vRoot.$t('reportForm.srcad3');

                    var statisticsday = this.statisticsday;
                    var deviceid = this.deviceid;


                    return {
                        title: {
                            text: deviceid ? deviceid : '',
                            textStyle: {
                                fontSize: 12
                            },
                            subtext: statisticsday ? statisticsday : '',
                        },
                        grid: {
                            top: 80,
                            left: 60,
                            right: 60,
                            bottom: 40,
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(v) {
                                var data = time + ' : ' + v[0].name + '<br/>';
                                for (i in v) {
                                    if (v[i].seriesName && v[i].seriesName != time) {
                                        if (v[i].seriesName == notRunTotalad || v[i].seriesName == notRunTotalad1 || v[i].seriesName == totoil || v[i].seriesName == usoil1 || v[i].seriesName == usoil2 || v[i].seriesName == usoil3 || v[i].seriesName == usoil4 ||
                                            v[i].seriesName == totoil1 || v[i].seriesName == usoil11 || v[i].seriesName == usoil21 || v[i].seriesName == usoil31 || v[i].seriesName == usoil41) {
                                            data += v[i].seriesName + ' : ' + v[i].value + 'L<br/>';
                                        } else if (v[i].seriesName == speed) {
                                            data += v[i].seriesName + ' : ' + v[i].value + 'Km/h<br/>';
                                        } else {
                                            data += v[i].seriesName + ' : ' + v[i].value + '<br/>';
                                        }
                                    }
                                }
                                return data;
                            },
                            position: utils.toolTipPosition,
                        },
                        legend: {
                            data: [
                                totoil, notRunTotalad, speed, usoil1, usoil2, usoil3, usoil4, srcad0, srcad1, srcad2, srcad3,
                                totoil1, notRunTotalad1, speed1, usoil11, usoil21, usoil31, usoil41, srcad01, srcad11, srcad21, srcad31
                            ],
                            width: 1050,
                            selected: this.selectedLegend,
                            // x: 'left',
                            // width: 600,
                        },
                        toolbox: {
                            show: false,
                            feature: {
                                magicType: {
                                    show: true,
                                    type: ['line', 'bar']
                                },
                                restore: {
                                    show: false
                                },
                                saveAsImage: {
                                    show: false
                                }
                            },
                            itemSize: 14
                        },
                        dataZoom: [{
                            show: true,
                            realtime: true,
                            start: 0,
                            end: 100,
                            height: 20,
                            backgroundColor: '#EDEDED',
                            fillerColor: 'rgb(54, 72, 96,0.5)',
                            //fillerColor:'rgb(244,129,38,0.8)',
                            bottom: 0
                        }, {
                            type: "inside",
                            realtime: true,
                            start: 0,
                            end: 100,
                            height: 20,
                            bottom: 0
                        }],
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {
                                onZero: false
                            },
                            data: this.recvtime
                        }],
                        yAxis: [{
                            name: totoil, //totoil + '/' + speed
                            type: 'value',
                            nameTextStyle: 10,
                            nameGap: 5,

                        }, ],
                        series: [{
                                smooth: true,
                                name: totoil,
                                type: 'line',
                                symbol: 'none',
                                color: '#C1232B',
                                data: this.totalad,
                                markPoint: {
                                    data: this.markPointData,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: notRunTotalad,
                                type: 'line',
                                symbol: 'none',
                                color: '#EE588E',
                                data: this.notRunTotalad,
                                markPoint: {
                                    data: this.markPointDataOil99,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: usoil1,
                                type: 'line',
                                symbol: 'none',
                                color: '#8E388E',
                                data: this.oil1,
                                markPoint: {
                                    data: this.markPointDataOil1,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: speed,
                                type: 'line',
                                symbol: 'none',
                                color: '#1310e6',
                                data: this.speed
                            },

                            {
                                smooth: true,
                                name: usoil2,
                                type: 'line',
                                symbol: 'none',
                                color: '#FF4500',
                                data: this.oil2,
                                markPoint: {
                                    data: this.markPointDataOil2,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: usoil3,
                                type: 'line',
                                symbol: 'none',
                                color: '#2177C7',
                                data: this.oil3,
                                markPoint: {
                                    data: this.markPointDataOil3,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: usoil4,
                                type: 'line',
                                symbol: 'none',
                                color: '#B05432',
                                data: this.oil4,
                                markPoint: {
                                    data: this.markPointDataOil4,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            },

                            {
                                smooth: true,
                                name: srcad0,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad0
                            }, {
                                smooth: true,
                                name: srcad1,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad1
                            }, {
                                smooth: true,
                                name: srcad2,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad2
                            }, {
                                smooth: true,
                                name: srcad3,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad3
                            }, {
                                smooth: true,
                                name: totoil1,
                                type: 'line',
                                symbol: 'none',
                                color: '#5316B4',
                                data: this.totalad1,
                                markPoint: {
                                    data: this.markPointData1,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: notRunTotalad1,
                                type: 'line',
                                symbol: 'none',
                                color: '#E4582E',
                                data: this.notRunTotalad1,
                                markPoint: {
                                    data: this.markPointDataOil199,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: speed1,
                                type: 'line',
                                symbol: 'none',
                                color: '#d1948a',
                                data: this.speed1
                            }, {
                                smooth: true,
                                name: usoil11,
                                type: 'line',
                                symbol: 'none',
                                color: '#EE12BE',
                                data: this.oil11,
                                markPoint: {
                                    data: this.markPointDataOil11,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            },

                            {
                                smooth: true,
                                name: usoil21,
                                type: 'line',
                                symbol: 'none',
                                color: '#12EE5B',
                                data: this.oil21,
                                markPoint: {
                                    data: this.markPointDataOil12,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: usoil31,
                                type: 'line',
                                symbol: 'none',
                                color: '#FCC40D',
                                data: this.oil31,
                                markPoint: {
                                    data: this.markPointDataOil13,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            }, {
                                smooth: true,
                                name: usoil41,
                                type: 'line',
                                symbol: 'none',
                                color: '#B05432',
                                data: this.oil41,
                                markPoint: {
                                    data: this.markPointDataOil14,
                                    symbolSize: 36,
                                    symbolKeepAspect: true,
                                }
                            },

                            {
                                smooth: true,
                                name: srcad01,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad01
                            }, {
                                smooth: true,
                                name: srcad11,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad11
                            }, {
                                smooth: true,
                                name: srcad21,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad21
                            }, {
                                smooth: true,
                                name: srcad31,
                                type: 'line',
                                symbol: 'none',
                                color: '#000000',
                                data: this.srcad31
                            },
                        ]
                    };
                },
            },
            watch: {
                oilType: function(newVal) {

                    var oildetectors = this.oildetectors;
                    var taggingDataRecords = this.taggingDataRecords;

                    if (this.oilType == '1') {
                        var item = oildetectors[0];
                        if (item) {
                            this.threshold1 = item.threshold;
                            this.blindvolume1 = item.blindvolume;
                            // this.newOilMarker1 = deepClone(item.markers);
                        } else {
                            this.threshold1 = null;
                            this.blindvolume1 = null;
                            this.refuelTickets = [];
                            // this.newOilMarker1 = [];
                        }
                        this.refuelTickets = taggingDataRecords[0];
                    } else if (this.oilType == '2') {
                        var item = oildetectors[1];
                        if (item) {
                            this.threshold2 = item.threshold;
                            this.blindvolume2 = item.blindvolume;
                            // this.newOilMarker2 = deepClone(item.markers);
                        } else {
                            this.threshold2 = null;
                            this.blindvolume2 = null;
                            this.refuelTickets = [];
                            // this.newOilMarker2 = [];
                        }
                        this.refuelTickets = taggingDataRecords[1];
                    } else if (this.oilType == '3') {
                        var item = oildetectors[2];
                        if (item) {
                            this.threshold3 = item.threshold;
                            this.blindvolume3 = item.blindvolume;

                            // this.newOilMarker3 = deepClone(item.markers);
                        } else {
                            this.threshold3 = null;
                            this.blindvolume3 = null;
                            this.refuelTickets = [];
                            // this.newOilMarker3 = [];
                        }
                        this.refuelTickets = taggingDataRecords[2];
                    } else if (this.oilType == '4') {
                        var item = oildetectors[3];
                        if (item) {
                            this.threshold4 = item.threshold;
                            this.blindvolume4 = item.blindvolume;
                            // this.newOilMarker4 = deepClone(item.markers);
                        } else {
                            this.threshold4 = null;
                            this.blindvolume4 = null;
                            this.refuelTickets = [];
                            // this.newOilMarker4 = [];
                        }
                        this.refuelTickets = taggingDataRecords[3];
                    }

                },
                month: function(newMonth) {
                    // sortable: true,
                    var self = this;
                    var dayColumns = [];

                    var day = this.getTheMonthDays(newMonth);

                    for (var i = 1; i <= day; i++) {
                        var key = 'day' + i;
                        (function(key, i) {
                            dayColumns.push({
                                key: key,
                                title: i,
                                width: 88,
                                align: 'center',
                                sortable: true,
                                render: function(h, params) {
                                    var row = params.row;
                                    var oil = row[key + 'oil'];
                                    var dayRecord = null;
                                    row.records.forEach(function(item) {
                                        var yearmonth = item.yearmonth + (i > 9 ? '-' + i : '-0' + i);
                                        if (item.statisticsday == yearmonth) {
                                            dayRecord = item
                                        }
                                    })

                                    // var contentChildren = self.getInfoContent(h, dayRecord);
                                    var color = self.getDayColor(dayRecord);
                                    return h('Button', {
                                        props: {
                                            // type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            width: '70px',
                                            backgroundColor: color,
                                            color: '#ffffff'
                                        },
                                        on: {
                                            click: function() {
                                                if (dayRecord) {
                                                    vueInstanse.statisticsday = dayRecord.statisticsday;
                                                    vueInstanse.deviceid = dayRecord.deviceid;
                                                    vueInstanse.queryChartsDataAndOil(dayRecord.statisticsday, dayRecord.deviceid);
                                                } else {
                                                    vueInstanse.statisticsday = '';
                                                    vueInstanse.deviceid = '';
                                                }
                                            },
                                        }
                                    }, [
                                        h('p', {}, row[key]),
                                        h('p', {}, oil ? (row[key + 'oil'] / 100) + 'L' : '-'),
                                    ]);
                                }
                            })
                        })(key, i)
                    }
                    this.dayColumns = dayColumns;
                },

            },
            mounted: function() {
                var _this = this;
                this.month = new Date();
                this.groupslist = deepClone(vRoot.$children[1].groups);
                this.oldChartsIns = echarts.init(document.getElementById('old-chart'));
                this.crtIdx = 1;
                this.oldChartsIns.getZr().on('click', function(params) {
                    var pointInPixel = [params.offsetX, params.offsetY];
                    if (_this.oldChartsIns.containPixel('grid', pointInPixel)) {
                        var xIndex = _this.oldChartsIns.convertFromPixel({
                            seriesIndex: 0
                        }, [params.offsetX, params.offsetY])[0];

                        var ad = 0;
                        if (_this.oilType == '1') {
                            ad = _this.srcad0[xIndex];
                        } else if (_this.oilType == '2') {
                            ad = _this.srcad1[xIndex];
                        } else if (_this.oilType == '3') {
                            ad = _this.srcad2[xIndex];
                        } else if (_this.oilType == '4') {
                            ad = _this.srcad3[xIndex];
                        }

                        var time = new Date(_this.recvtime[xIndex]).getTime();
                        if (_this.crtIdx == 1) {
                            _this.startad = ad;
                            _this.starttime = time;
                        }
                        if (_this.crtIdx == 2) {
                            _this.endad = ad;
                            _this.endtime = time;
                        }
                        _this.crtIdx++;
                        if (_this.crtIdx > 2) {
                            _this.crtIdx = 1;
                        }



                    }
                });



                this.recvtime = [];
                this.markPointData = [];
                this.markPointDataOil1 = [];
                this.markPointDataOil2 = [];
                this.markPointDataOil3 = [];
                this.markPointDataOil4 = [];
                this.markPointDataOil99 = [];

                this.totalad = [];
                this.speed = [];
                this.oil1 = [];
                this.oil2 = [];
                this.oil3 = [];
                this.oil4 = [];
                this.srcad0 = [];
                this.srcad1 = [];
                this.srcad2 = [];
                this.srcad3 = [];

                this.markPointData1 = [];
                this.totalad1 = [];
                this.speed1 = [];
                this.oil11 = [];
                this.oil21 = [];
                this.oil31 = [];
                this.oil41 = [];
                this.srcad01 = [];
                this.srcad11 = [];
                this.srcad21 = [];
                this.srcad31 = [];

                this.markPointDataOil11 = [];
                this.markPointDataOil12 = [];
                this.markPointDataOil13 = [];
                this.markPointDataOil14 = [];
                this.markPointDataOil199 = [];

                // recvtime markPointData totalad oil 1 - 4 srcad 0 - 3 devStates devReissue


                if (isZh) {
                    this.selectedLegend = {
                        "前非行驶油液": false,
                        "后非行驶油液": false,
                        "前速度": false,
                        "前油液1": false,
                        "前油液2": false,
                        "前油液3": false,
                        "前油液4": false,
                        "前模拟量2": false,
                        "前模拟量3": false,
                        "前模拟量4": false,

                        "后速度": false,
                        "后油液1": false,
                        "后油液2": false,
                        "后油液3": false,
                        "后油液4": false,
                        "后模拟量1": false,
                        "后模拟量2": false,
                        "后模拟量3": false,
                        "后模拟量4": false,

                    }
                } else {
                    this.selectedLegend = {
                        "Prve Other Fuel": false,
                        "Next Other Fuel": false,
                        "Prve Speed": false,
                        "Prve Tank1": false,
                        "Prve Tank2": false,
                        "Prve Tank3": false,
                        "Prve Tank4": false,
                        // "Prve srcad0": false,
                        "Prve srcad1": false,
                        "Prve srcad2": false,
                        "Prve srcad3": false,

                        "Next Speed": false,
                        "Next Tank1": false,
                        "Next Tank2": false,
                        "Next Tank3": false,
                        "Next Tank4": false,
                        "Next srcad0": false,
                        "Next srcad1": false,
                        "Next srcad2": false,
                        "Next srcad3": false,
                    }
                }



                _this.oldChartsIns.setOption(_this.getChartsOption());
                _this.oildetectors = [];
                _this.calcTableHeight();
                window.onresize = function() {
                    _this.oldChartsIns.resize();
                    _this.calcTableHeight();
                };


                _this.oldChartsIns.on('legendselectchanged', function(param) {
                    _this.selectedLegend = param.selected;
                });

            }
        })
    </script>
</div>